<script >


import { defineComponent } from 'vue';

import {userRegister} from "@/api/register";
import VDistpicker from 'v-distpicker'
import axios from "axios";

export default {
  name: "Register",
  // components: {VDistpicker},
  data() {
    return {
      form: {
        username: '',
        useraccount: '',
        userpsd: '',
        age:'',
        phone:'',
        sex: '1',
        roleId: '1',
        // address: '',
        // province: '',
        // city: '',
        // area: '',
      },
      rules: {
        useraccount: [{required: true, message: "请输入账号", trigger: "blur"},
          {min: 1, max: 20, message: '请勿超过20个字符！', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              const reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/  //正则表达式 只能输入英文、汉字与数字
              if (!reg.test(value)) {
                callback(new Error('请勿输入特殊字符'))
              } else {
                callback()
              }
            }
          }
        ],
        userpsd: [{required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur'}
        ],
        checkPass: [{required: true, message: "请再次输入密码", trigger: "blur"},
          {min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.userpsd) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback()
              }
            }
          }]
      },
      // placeholders: {
      //   province: '请选择省份',
      //   city: '请选择市',
      //   area: '请选择区',
      // },
    };
  },
  methods: {
    //   onChangeProv(province) {
    //     this.province = province.value;
    //   },
    //   onChangeCity(city) {
    //     this.city = city.value;
    //   },
    //   onChangeArea(area) {
    //     this.area = area.value;
    //   },
    // 首先限制它只能输入整数，最大长度为maxlength="11"，其次是当它输入长度达到11位时进行校验
    onInput(key, event) {
      this.form[key] = event.replace(/[^\d]/g, '')
      if (event.length >= 11) {
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        if (!reg.test(event)) {
          console.log('您输入的手机号不正确')
        }
      }
    },
    submit() {
      //校验输入
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.form.address = this.province + this.city + this.area;    //包装地址
          //注册功能
          userRegister(this.form).then(res => {
            console.log(res)
            //用户注册成功或设计师成功提交材料后，显示相关信息后自动返回首页
            if (res.code === 200) {
              if (this.form.roleId == 1) {
                alert("用户注册成功")
                window.location.href = "/login";
              } else {
                alert("设计师注册成功")
                window.location.href = "/login";
              }
            } else {
              alert("该账号已注册过！请重新输入")//注册失败，返回注册页面
            }
          })
        } else {
          alert("请按照规范输入账号")
        }
      })
    }
  }
}

</script>

<template>
  <div class="register-container">
    <!-- 根标签 -->
    <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="register-form">

      <h1 class="title">注 册</h1>
      <el-form-item label="账号" prop="useraccount">
        <el-input v-model="form.useraccount"
                  placeholder="账号作为登陆的唯一方式，一旦注册成功不可更改！"
                  maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="userpsd">
        <el-input
            type="password"
            v-model="form.userpsd"
            placeholder="请输入密码"
            autocomplete="off"
            maxlength="16"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
            type="password"
            v-model="form.checkPass"
            placeholder="请再次输入密码"
            autocomplete="off"
            maxlength="16"
        ></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="性别"  prop="sex" style="text-align:left">
        <el-radio-group v-model="form.sex" >
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄"  prop="age" style="text-align: left">
        <el-input v-model="form.age" maxlength="2"></el-input>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" maxlength="11" minlength="11" @input="onInput('keyName', $event)"></el-input>
      </el-form-item>

<!--      <el-form-item label="地址" prop="address" style="text-align: left" >-->
<!--        <v-distpicker :placeholders="placeholders" v-model="form.address"-->
<!--                      @province="onChangeProv"-->
<!--                      @city="onChangeCity"-->
<!--                      @area="onChangeArea"></v-distpicker>-->
<!--      </el-form-item>-->




      <el-form-item label="身份" prop="roleId" style="text-align: center">
        <div style="margin-top: 20px">
          <el-radio v-model="form.roleId" label="1" border size="mini">客户</el-radio>
          <el-radio v-model="form.roleId" label="2" border size="mini" >设计师</el-radio>
        </div>
      </el-form-item>

      <div v-if="form.roleId==2">
        <el-form-item v-model="form.file" label="材料证明" prop="file" style="text-align: center">
          <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">请上传设计师相关材料验证，只能上传jpg/png文件，且不超过500kb</div>
          </el-upload></el-form-item>
      </div>

      <el-form-item style="text-align: center">
        <el-button type="primary" @click="submit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<style scoped >
.register-container {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.register-form {
  width: 600px;
  margin: 150px auto;
  background-color: rgb(214, 174, 218);
  padding: 30px;
  border-radius: 20px;
}
.title {
  text-align: center;
  font-family: "注册";
}

</style>